<template>
  <div class="app-container">
    <el-card :style="{ borderRadius: '5px' }">
      <div class="filter-container">
        <el-date-picker v-model="createTimeDateVul" format="yyyy-MM-dd " value-format="yyyy-MM-dd" type="daterange"
          range-separator="至" start-placeholder="入住时间" end-placeholder="离开时间" style="width:360px"
          @change="handlecreateTimeDateChange" />
        <el-input v-model="model.house_keyword" placeholder="请输入关键词" style="width: 200px; margin-left: 10px"
          @keyup.enter.native="handleFilter" />
        <el-input v-model="model.name" placeholder="请输入姓名" style="width: 200px; margin-left: 10px"
          @keyup.enter.native="handleFilter" />
        <el-input v-model="model.phone" placeholder="请输入联系电话" style="width: 200px; margin-left: 10px"
          @keyup.enter.native="handleFilter" />

        <el-button v-waves type="primary" style="margin-left: 10px" plain icon="el-icon-search"
          @click="handleFilter">搜索</el-button>
      </div>
    </el-card>
    <el-card :style="{ marginTop: '10px', borderRadius: '5px' }">
      <el-table v-loading.body="!listLoading" :header-row-style="{ height: '70px' }" :header-cell-style="{
        color: '',
        fontSize: '',
        backgroundColor: '#dfe6ec',
      }" :data="list" border fit highlight-current-row style="width: 100%" tooltip-effect="dark">
        <el-table-column label="序号" width="50px" align="center" type="index" show-overflow-tooltip />
        <el-table-column label="订单号" prop="orderno" min-width="180px" align="center" show-overflow-tooltip />

        <el-table-column label="标题" min-width="180px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column prop="logo" label="主图" min-width="100px" align="center">
          <template slot-scope="{ row }">
            <div style="display: flex; justify-content: center">
              <HzImg :src="row.logo" cssStyle="height: 80px;width: 80px" />
            </div>
          </template>
        </el-table-column>

        <el-table-column label="开始入住日期" prop="sdate" align="center" show-overflow-tooltip />

        <el-table-column label="结束入住日期" prop="edate" align="center" show-overflow-tooltip />
        <el-table-column label="入住人数" prop="persons" align="center" show-overflow-tooltip />
        <el-table-column label="联系姓名" prop="name" align="center" show-overflow-tooltip />
        <el-table-column label="联系电话" prop="phone" align="center" show-overflow-tooltip />
        <el-table-column label="预定状态" min-width="80px" align="center" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.state == 0">已取消</span>
            <span v-if="row.state == 1">已预订</span>
            <span v-if="row.state == 2">进行中</span>
            <span v-if="row.state == 3">已完成</span>
            <span v-if="row.state == 4">已评价</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="note" align="center" width="90px" show-overflow-tooltip />
      </el-table>
      <div v-show="listLoading" class="pagination-container">
        <el-pagination :current-page.sync="model.pageNo" :page-sizes="[10, 20, 30, 50]" :page-size="9"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </el-card>


  </div>
</template>
  
<script>
import HzFileUpload from "@/custom/HzFileUpload";
import HzImgUpload from "@/custom/HzImgUpload";
import HzImg from "@/custom/HzImg";
import HzLink from "@/custom/HzLink";
import waves from "@/directive/waves"; // waves directive
import {
  fetchReserve
} from "@/api/system/user";
import { fetchAllList as fetchAllLocationItemList } from "@/api/system/locationItem";
import { fetchAllList as fetchAllUserList } from "@/api/system/user";

import { fetchAllList as fetchAllDictList } from "@/api/system/dict";

export default {
  name: "Common",
  directives: {
    waves,
  },
  components: {
    HzFileUpload,
    HzImgUpload,
    HzImg,
    HzLink,
  },
  data() {
    return {
      loading: false,
      name: "",
      list: [],
      total: 0,
      listLoading: false,
      extra: {}, //额外参数(用于格式化)

      createTimeDateVul: [],
      model: {
        pageNo: 1,
        pageSize: 10,
      }
    };
  },
  created() {
    this.getList();
  },

  mounted() { },
  methods: {
    handlecreateTimeDateChange(v) {
      this.createTimeDateVul = v;
      if (this.createTimeDateVul != null) {
        this.model.sdate = this.createTimeDateVul[0];
        this.model.edate = this.createTimeDateVul[1];
      } else {
        this.model.sdate = "";
        this.model.sdate = "";
      }
      this.model.pageNo = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.model.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.model.pageNo = val;
      this.getList();
    },
    getList() {
      this.listLoading = false;
      fetchReserve(this.model).then((response) => {
        let data = response.data.records;
        this.list = data;
        this.extra = response.extra;
        this.total = response.data.total;
        this.listLoading = true;
      });
    },
    handleFilter() {
      this.model.pageNo = 1;
      this.getList();
    },
  },
};
</script>
<style></style>
  